<template>
  <div class="userslogin">
    <van-nav-bar title="用户注册"></van-nav-bar>
    <div class="container">
      <div class="input-container">
        <input
          type="text"
          placeholder="请输入账号"
          v-model="Form.username"
        />
      </div>
      <div class="input-container">
        <input
          type="password"
          placeholder="请输入密码"
          v-model="Form.password"
        />
      </div>
      <div class="input-container">
        <input
          type="password"
          placeholder="请输入重复密码"
          v-model="Form.Repassword"
        />
      </div>
      <div class="input-container">
        <input
          type="tel"
          placeholder="请输入验证码"
          v-model="Form.phone_code"
        />
        <button class="get-code" @click="handleGetCode" v-if="!isReturned">
          获取验证码
        </button>
        <button class="get-code" v-if="isReturned">{{ time }}秒后获取</button>
      </div>
      <div
        class="login btn_class"
        @click="handleRegister"
        :class="{ active: isBtnActive }"
      >
        注册
      </div>
      <div class="register btn_class" @click="handleToLogin">登录</div>
      <div class="quick-login">
        <span class="forget-psd"
          ><div @click="handleToForgetpwd">忘记密码</div></span
        >
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { register, getSMS } from "@/api/api";
import activeMixin from 'util/mixins/activeMixin'
const TIME_BACK_STATUS = true;
const NOT_TIME_BACK_STATUS = false;
const TIME_REDUCE = 60;
export default {
  name: "UsersRegister",
  mixins: [activeMixin],
  data() {
    return {
      Form: {
        username: "",
        password: "",
        Repassword: "",
        phone_code: ""
      },
      time: TIME_REDUCE,
      isReturned: NOT_TIME_BACK_STATUS,
      timer: null
    };
  },
  methods: {
    handleToLogin() {
      this.$emit('update:loginOrRegister', 'login');
    },
    handleToForgetpwd() {
      this.$emit('update:loginOrRegister', 'forgetpwd');
    },
    handleTimeReduce() {
      if (this.time <= 1) {
        this.isReturned = NOT_TIME_BACK_STATUS;
        this.time = TIME_REDUCE;
        clearTimeout(this.timer);
        return;
      }
      this.time--;
      this.timer = setTimeout(() => this.handleTimeReduce(), 1000);
    },
    handleRegister() {
      if(this.isBtnActive) {
        if (this.Form.password !== this.Form.Repassword) {
          this.$notify('重复密码不一致');
          return;
        }
        if (!this.Form.phone_code) {
          this.$notify('验证码不能为空');
          return;
        }
        register(this.Form).then(res => {
          console.log(res);
          if (res.status) {
            this.$emit('update:loginOrRegister', 'login');
          }
        }).catch(err => {
          console.log(err);
        });
      }
    },
    handleGetCode() {
      if (!this.rule.test(this.Form.username)) {
        this.$notify('用户名格式错误,无法发送验证码');
        return;
      }
      getSMS(this.Form).then(res => {
        console.log(res);
        if (res.status) {
          this.isReturned = TIME_BACK_STATUS;
          this.handleTimeReduce();
        }
      }).catch(err => {
        console.log(err);
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="stylus">
a
  color #A9A9A9

.userslogin
  width 90%
  margin 0 auto
  background #ffffff

  .container
    height 100%
    width 100%
    overflow hidden
    margin-top 30px

    .input-container
      margin-bottom 15px
      position: relative

      .get-code
        position absolute
        right 0
        top 4px
        background none
        font-size 16px
        padding-left 10px
        color #757575

    .quick-login
      margin-top 20px
      overflow hidden
      width 100%
      font-size 14px

      .forget-psd
        float right

    .btn_class
      width 100%
      border-radius 25px
      height 40px
      line-height 40px
      font-size 16px
      text-align center


    .login
      color #ffffff
      background-image linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba)
      margin-bottom 15px

    .register
      color #f10000
      background-color #ffffff
      border 1px solid #f10000
      box-sizing border-box

    .input-container
      height 40px
      border-bottom 1px solid #efefef

      &:nth-child(1), &:nth-child(2)
        margin-bottom 20px

    .input-container input[type="text"]
      width 100%
      font-size 15px
      color #222222

    .input-container input[type="tel"]
      width 100%
      font-size 15px
      color #222222

    .input-container input[type="password"]
      width 100%
      font-size 15px
      color #222222
</style>
